<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		body {
			/*padding-top: 25px;*/
		}

		span {
			margin: 10px;
		}

		.Tabl {
			height: 10px;
			width: 88%;
			font-size: 14px;
			/*font-weight: bold;*/
			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			color: #B8B8B8;
			width: 110px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
		}

		.Hr {
			/*height: 1px;
				 width: 96%;*/
			background-color: #DDDDDD;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		select {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			border: none;
			background: none;
		}

		td {
			border: 1px solid transparent !important;
		}
	</style>
</head>

<body>
	<div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
			style="margin-top: 150px">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<table class="table table-striped" style="border: 0">
							<tbody id="tz" style="border: 0">
								<tr style="border: 0">
									<td>序号</td>
									<td>名称</td>
									<td>科属</td>
									<td>操作</td>
								</tr>
								<tr v-for="(lis,index) in list" style="border: 0">
									<td v-text="index+1"></td>
									<td v-text="lis.name"></td>
									<td v-text="lis.genus"></td>
									<td><button data-dismiss="modal" @click="details(lis)">选择</button></td>
								</tr>
							</tbody>
						</table>
						<!--
							<table>
							<tr v-for="(lis,index) in list">
							<td v-text="lis.name"></td>
							<td><button onclick="dianji()">选择</button></td>
							</tr>
							</table>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="id" name="id" />
	<input type="hidden" id="aid" name="aid" />
	<button style="background-color: #F2F2F2;height: 47px;width: 100%;font-size: 18px;">
		基本信息
	</button>
	<table class="Tabl" style="margin-top: 20px">
		<tr>
			<td class="Td1">所属标段:</td>
			<td class="Td2">
				<input type="text" readonly="readonly" id="areaName" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">绿地名称:</td>
			<td class="Td2" id="ld">
				<select id="greedLandId">
					<option value=""> --请选择-- </option>
					<option v-for="(l,index) in ld" :value="l.id"> {{l.name}} </option>
				</select><!-- <input type="text" value="洛带古镇客栈区" /> -->
			</td>
		</tr>
	</table>
	<button style="background-color: #F2F2F2;height: 47px;width: 100%;margin-top: 20px;font-size: 18px;">
		观测信息
	</button>
	<table class="Tabl" style="margin-top: 20px">
		<tr>
			<td class="Td1">发现时间:</td>
			<td class="Td2">
				<input type="date" id="startTime" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">病/虫害类型:</td>
			<td class="Td2">
				<select id="types">
					<option value=""> --请选择-- </option>
					<option v-for="(lisone,index) in list1" :value="lisone.name"> {{lisone.name}} </option>

				</select></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">病情/虫灾描述:</td>
			<td class="Td2">
				<input type="text" id="describes" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">虫灾地点:</td>
			<td class="Td2">
				<input type="text" id="place" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">感染数量:</td>
			<td class="Td2">
				<input type="text" id="quantity" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />


	<table class="Tabl">
		<tr>
			<td class="Td1">感染植物</td>
			<td class="Td2">
				<input type="text" readonly="readonly" data-toggle="modal" data-target="#myModal" id="plant" value="" />
			</td>
		</tr>
	</table>



	<button style="background-color: #F2F2F2;height: 47px;width: 100%;margin-top: 20px;font-size: 18px;">
		处置信息
	</button>
	<table class="Tabl" style="margin-top: 20px">
		<tr>
			<td class="Td1">药剂名称:</td>
			<td class="Td2">
				<select id="medicament">
					<option value=""> --请选择-- </option>
					<option v-for="(listhre,index) in list3" :value="listhre.name"> {{listhre.name}} </option>

				</select></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">用量:</td>
			<td class="Td2">
				<input type="text" id="dosages" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">处置效果:</td>
			<td class="Td2">
				<select id="effect">
					<option value=""> --请选择-- </option>
					<option value="显著"> 显著 </option>
					<option value="良好"> 良好 </option>
					<option value="合格"> 合格 </option>
					<option value="其他"> 其他 </option>
				</select></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">处置时间:</td>
			<td class="Td2">
				<input type="date" id="endTime" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">处置方法:</td>
			<td class="Td2">
				<select id="movement">
					<option value=""> --请选择-- </option>
					<option v-for="(listo,index) in list2" :value="listo.name"> {{listo.name}} </option>
					<option value="喝头孢"> 喝头孢 </option>
				</select></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">施工单位:</td>
			<td class="Td2">
				<input type="text" id="construction" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="TabL" style="height: 60px">
		<tr>
			<td> <textarea rows="4" cols="35" id="remarks" placeholder="备注"></textarea></td>
		</tr>
	</table>
	<button style="background-color: #F2F2F2;height: 47px;width: 100%;margin-top: 20px;font-size: 18px;">
		图片信息
	</button>
	<div style="padding: 10px;">
		<ul class="upload-ul clearfix">
			<li class="upload-pick" style="margin-top: 20px">
				<div id="xcimage"><img id="immmg" src="" style="width: 100px;height: 100px">
				</div>
				<div class="webuploader-container clearfix" id="goodsUpload" onclick="fb()"></div>
			</li>
		</ul>
	</div>
	<hr class="Hr" />
	<div style="padding: 10px;">
		<ul class="upload-ul clearfix">
			<li class="upload-pick">
				<div id="xcimages"><img id="immmgs" src="" style="width: 100px;height: 100px">
				</div>
				<div class="webuploader-container clearfix" id="goodsUploads" onclick="fbs()"></div>
			</li>
		</ul>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" style="width: 100%" onclick="subssssss()">
			保存更改
		</button>
	</div>
</body>
<script src="../../script/webuploader.min.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script src="../../script/diyUpload.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	var UIMediaScanner;
	var image;
	var images;
	var user;
	apiready = function () {
		user = $api.getStorage('userSession');
		$("#xcimage").hide();
		$("#xcimages").hide();
		UIMediaScanner = api.require('UIMediaScanner');
		var result = api.pageParam.result;
		//alert(JSON.stringify(result))

		var projectid = null;
		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		if (role != "construction") {
			$("#areaName").val($api.getStorage('selectpor').projectName);
			$("#aid").val($api.getStorage('selectpor').id);
		} else {
			projectid = reg.data.areaid;
			$("#aid").val(projectid);
		}

		//虫情监测
		var apps = new Vue({
			el: '#ld',
			data: {
				ld: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insectory/findGreen.json",
					data: {
						aid: projectid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						//alert(JSON.stringify(result));
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								//alert(result.data[i])
								apps.ld.push(result.obj[i]);
							}
						}
					}
				});
			}
		});
		var avm = new Vue({
			el: '#myModal',
			data: {
				list: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/list.json",
					data: {
						id: user.data.id
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								avm.list.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (_this) {
					$("#plant").val(_this.name);
				}
			}
		});

		//虫灾类型
		var avm1 = new Vue({
			el: '#types',
			data: {
				list1: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/findInsectType.json",
					data: {

					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								avm1.list1.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (_this) {
					$("#types").val(_this.name);
				}
			}
		});


		//处置方法
		var avm2 = new Vue({
			el: '#movement',
			data: {
				list2: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/findDisposalMethods.json",
					data: {

					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								avm2.list2.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (_this) {
					$("#movement").val(_this.name);
				}
			}
		});


		//药剂
		var avm3 = new Vue({
			el: '#medicament',
			data: {
				list3: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/findMedicamentType.json",
					data: {

					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								avm3.list3.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (_this) {
					$("#medicament").val(_this.name);
				}
			}
		});



	};

	function subssssss() {

		var formData = new FormData();
		formData.append("id", $("#id").val());
		formData.append("userid", user.data.id);
		formData.append("aid", $("#aid").val());
		formData.append("areaName", $("#areaName").val());
		formData.append("greedLandId", $("#greedLandId").val());
		formData.append("startTime", $("#startTime").val());
		formData.append("types", $("#types").val());
		formData.append("describes", $("#describes").val());
		formData.append("place", $("#place").val());
		formData.append("quantity", $("#quantity").val());
		formData.append("plant", $("#plant").val());
		formData.append("medicament", $("#medicament").val());
		formData.append("dosages", $("#dosages").val());
		formData.append("effect", $("#effect").val());
		formData.append("endTime", $("#endTime").val());
		formData.append("movement", $("#movement").val());
		formData.append("construction", $("#construction").val());
		formData.append("remarks", $("#remarks").val());
		formData.append("image", image);
		formData.append("images", images);
		$.ajax({
			url: BaseServiceUrl + "mobile/insectory/update.json",
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (data) {
				if (data.code == 0) {
					alert("添加成功");
					window.location.reload();
				}
			}
		});
	}

	function fb() {
		UIMediaScanner.open({
			type: 'picture',
			column: 4,
			classify: true,
			max: 4,
			sort: {
				key: 'time',
				order: 'desc'
			},
			texts: {
				stateText: '已选择*项',
				cancelText: '取消',
				finishText: '完成'
			},
			styles: {
				bg: '#fff',
				mark: {
					icon: '',
					position: 'bottom_left',
					size: 20
				},
				nav: {
					bg: '#eee',
					stateColor: '#000',
					stateSize: 18,
					cancelBg: 'rgba(0,0,0,0)',
					cancelColor: '#000',
					cancelSize: 18,
					finishBg: 'rgba(0,0,0,0)',
					finishColor: '#000',
					finishSize: 18
				}
			},
			scrollToBottom: {
				intervalTime: 3,
				anim: true
			},
			exchange: true,
			rotation: true
		}, function (ret) {
			if (ret) {
				image = ret.list[0].path;
				$('#immmg').attr('src', image);
				//图片链接（base64）
				$("#xcimage").show();
			}
		});
	}

	function fbs() {
		UIMediaScanner.open({
			type: 'picture',
			column: 4,
			classify: true,
			max: 4,
			sort: {
				key: 'time',
				order: 'desc'
			},
			texts: {
				stateText: '已选择*项',
				cancelText: '取消',
				finishText: '完成'
			},
			styles: {
				bg: '#fff',
				mark: {
					icon: '',
					position: 'bottom_left',
					size: 20
				},
				nav: {
					bg: '#eee',
					stateColor: '#000',
					stateSize: 18,
					cancelBg: 'rgba(0,0,0,0)',
					cancelColor: '#000',
					cancelSize: 18,
					finishBg: 'rgba(0,0,0,0)',
					finishColor: '#000',
					finishSize: 18
				}
			},
			scrollToBottom: {
				intervalTime: 3,
				anim: true
			},
			exchange: true,
			rotation: true
		}, function (ret) {
			if (ret) {
				images = ret.list[0].path;
				$('#immmgs').attr('src', images);
				//图片链接（base64）
				$("#xcimages").show();
			}
		});
	}
</script>

</html>